import * as React from 'react'
import { cn } from '@/lib/utils'
import { LoaderPinwheel } from 'lucide-react'

type Props = {
  mask?: boolean
  description?: string
}

export function Loading({ className, mask, description }: React.ComponentProps<'div'> & Props): JSX.Element {

  // return <div className={cn('width-full h-full flex items-center justify-center', className)}>
  //   <LoaderPinwheel className='animate-spin' />
  // </div>

  return <div className={cn('w-full h-full flex items-center justify-center', className, mask ? 'bg-accent-foreground/20' : '')}>
    {description && <span className='text-accent-foreground text-sm pr-4'>{description}</span>}
    <svg className="animate-spin -ml-1 mr-3 text-primary" fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
      <circle className="opacity-25" cx="24" cy="24" r="16" stroke="currentColor" strokeWidth="4"></circle>
      <circle
        cx="24"
        cy="24"
        r="16"
        stroke="currentColor"
        strokeDasharray="10 80"
        strokeLinecap="round"
        strokeWidth="4"
      >
      </circle>
    </svg>
  </div>
}
